/**
 * @author:linjiye
 * @date: 2024/12/26
 * @desc:
 **/

import {Image, ImageBackground, Pressable, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import React from 'react'
import {FcView} from "@/components/FcView";
import {FcText} from "@/components/FcText";
import {LinearGradient} from "expo-linear-gradient";
import uri from "ajv/lib/runtime/uri";

type Props = {
    tabList: Array<any>,
    selectVal: number
}

const TabCard = ({tabList, selectVal, onTabCardClick}: Props) => {
    const handleTab = (val) => {
        onTabCardClick(val)
    }
    return (
        <View style={styles.container}>
            <ImageBackground
                style={styles.bg}
                // resizeMode='contain'
                source={selectVal === 1 ? require('@/assets/images/tab1_icon.png') : require('@/assets/images/tab2_icon.png')}
            >
                {tabList.map((item, index) =>
                    <TouchableOpacity key={index} style={styles.item_wrap} onPress={() => handleTab(item)}>
                        <Text style={[styles.itemTxt, selectVal === item.val ? styles.active : '']}>{item.name}</Text>
                    </TouchableOpacity>
                )}
            </ImageBackground>
        </View>
    )
}

export default TabCard

const styles = StyleSheet.create({
    container: {
        marginHorizontal: 16,
        height: 46,
        flexDirection: "row",
        alignItems: "center"
    },
    bg: {
      width: '100%',
      height: '100%',
        flexDirection: "row",
        alignItems: "center",
    },
    item_wrap: {
        flex: 1,
        height: '100%',
        flexDirection: "row",
        justifyContent: 'center',
        alignItems: "center",
    },
    item: {
        width: '100%',
        height: '100%',
        justifyContent: "center",
        alignItems: "center"
    },
    itemTxt: {
        color: 'rgba(0, 0, 0, 0.5)',
        fontSize: 17,
        fontWeight: 'bold',
    },
    active: {
        color: 'rgba(0, 0, 0, 0.9)'
    }
})